<template>
  <el-table :data="tableData" style="width: 100%" height="250">
    <el-table-column prop="avatarUrl" label="头像" width="100">
      <template #default="scoped">
        <img style="width: 50px;height: 50px;" :src="scoped.row.avatarUrl" alt="">
      </template>
    </el-table-column>
    <el-table-column prop="nickName" label="微信名" width="120" />
    <el-table-column prop="buyNums" label="购买次数" width="100">
      <template #default="scoped">
        {{ scoped.row.buyCommonity.length }}次
      </template>
    </el-table-column>
    <el-table-column prop="registerTimer" label="注册时间" width="200" />

    <el-table-column prop="preferentialCard" label="优惠卷" width="">
      <template #default="scoped">
        <el-link @click="setpreferentialCard(scoped)" :icon="Edit">共有{{ scoped.row.preferentialCard.length
        }}张优惠卷</el-link>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scoped">
        <el-button link type="primary" size="small" @click="handleClick">修改</el-button>
        <el-button link type="primary" @click="look(scoped.$index)" size="small">查看</el-button>
      </template>
    </el-table-column>
  </el-table>


  <el-drawer v-model="drawer" direction="ttb" :before-close="handleClose" custom-class="setHeight">
    <el-descriptions class="margin-top" title="用户信息" :column="3" :size="size" border>
      <template #extra>
      </template>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            微信名
          </div>
        </template>
        {{ currentUser.nickName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <iphone />
            </el-icon>
            注册时间
          </div>
        </template>
        {{ currentUser.registerTimer }}
      </el-descriptions-item>
    </el-descriptions>
    <el-table v-if="drawerValue === '查看'" :data="currentBuy" border style="width: 100%"
      :row-class-name="tableRowClassName">
      <el-table-column prop="name" label="商品名称" fixed width="180">
        <template #default="scoped">
          {{ scoped.row.name }} (取货码:{{ scoped.row.id }})
        </template>
      </el-table-column>
      <el-table-column prop="price" label="商品价格" width="100" />
      <el-table-column prop="num" label="数量" width="100">
        <template #default="scoped">
          {{ scoped.row.num }}杯
        </template>
      </el-table-column>
      <el-table-column prop="burdening" label="选单" width="180">
        <template #default="scoped">
          {{ scoped.row.burdening.sugar }}/
          {{ scoped.row.burdening.temperature }}/
          {{ scoped.row.burdening.cup }}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="客人信息" width="280">
        <template #default="scoped">
          <div>
            <div>姓名：{{ scoped.row.username }}</div>
            <div>地址：{{ scoped.row.address }}</div>
            <div>号码：{{ scoped.row.phone }}</div>

          </div>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="180" />
      <el-table-column prop="pricAndtake" label="取货方式" width="100" />
      <el-table-column prop="timer" label="下单时间" width="180" />
      <el-table-column prop="schedule" label="制作情况" width="180" />

    </el-table>
    <div v-else>
      <!-- 添加优惠卷 -->
      <el-select v-model="preferentialValue" class="m-2" placeholder="Select" size="large">
        <el-option v-for="item in PreferentialLsit" :key="item.id" :value="item.name" />

      </el-select>
      <el-button type="primary" @click="addPreferentialValue">添加优惠卷</el-button>
      <el-collapse v-if="preferentialFlag" v-model="activeName" accordion>
        <el-collapse-item v-for="(item, index) in currentUser.preferentialCard" :title="item.name" :name="index">
          <div>
          优惠卷名称：{{ item.name }}
          </div>
          <div>
            优惠卷价格：{{ item.price }}
          </div>
          <div>
            到期时间：{{ item.timer }}
          </div>
          <div>
          </div>
        </el-collapse-item>
      </el-collapse>
      <h1 v-else>暂无优惠卷</h1>
    </div>
  </el-drawer>
</template>
    
<script setup >
import { reactive, ref, toRaw } from "vue";
import { getLoginUser, updateCurrentUser, getPayList, getPreferential } from "../API/index"
import { ElMessage } from 'element-plus'

const tableData = reactive([])
let currentUser = ref(null)
let currentBuy = ref([])
let drawerValue = ref('奥里给')
let drawer = ref(false)
let preferentialFlag = ref(null);//当前优惠卷是否为0
let PreferentialLsit = reactive([]);//优惠卷
let preferentialValue = ref('')//当前选择添加的优惠卷
let currentUserYHJ = ref([])
// 所有优惠卷
const getPreferentialLsit = async () => {
  PreferentialLsit.splice(0, PreferentialLsit.length)
  let { data } = await getPreferential()
  PreferentialLsit.push(...data)
  console.log(PreferentialLsit._value);
}
getPreferentialLsit()

const getList = async () => {
  tableData.splice(0, tableData.length)
  let { data } = await getLoginUser()
  data.map(item => {
    tableData.push({ ...item, preferentialCard: JSON.parse(item.preferentialCard),buyCommonity:JSON.parse(item.buyCommonity) })

  })
  console.log(tableData);
}
getList()

let allList = []
const getPayLists = async () => {
  allList.splice(0, allList.length)
  let { data } = await getPayList()
  data.map((item, index) => {
    allList.push({ ...item, claim: item.id, burdening: JSON.parse(data[index].burdening), schedule: item.schedule })
  })
  console.log(allList);
}
getPayLists()

const look = (index) => {
  console.log(tableData);
  drawerValue.value = '查看'
  drawer.value = true
  currentUser.value = tableData[index]
  // console.log(currentUser._rawValue);
  console.log(allList);
  currentBuy.value = allList.filter(item => item.total === currentUser._rawValue.avatarUrl)
  console.log(currentUser);
}
// 设置优惠卷
const setpreferentialCard = (current) => {
  drawerValue.value = '优惠卷'
  drawer.value = true
  currentUser.value = tableData[current.$index]
  preferentialFlag.value = currentUser._value.preferentialCard.length !== 0

}
// 添加优惠卷
const addPreferentialValue = async () => {
  let { data } = await getLoginUser()
  let filterarr = PreferentialLsit.filter(item => item.name === preferentialValue._value)

// 如果等于0，那就是第一次添加
if(JSON.parse(data[0].preferentialCard).length === 0){
  updateCurrentUser({ total: currentUser._value.total, preferentialCard: JSON.stringify(filterarr) })
    getList()
}else if (JSON.parse(data[0].preferentialCard).length !== 0&&!JSON.parse(data[0].preferentialCard).some(item=>item.id===filterarr[0].id)) {
    let arr = JSON.parse(data[0].preferentialCard)//当前已有的优惠卷
    arr.push(...filterarr)
    updateCurrentUser({ total: currentUser._value.total, preferentialCard: JSON.stringify(arr) })
    getList()
    ElMessage({
        type: 'success',
        message: `添加优惠卷成功`,
      })
  }else{
    ElMessage({
        type: 'success',
        message: `当前优惠卷已有`,
      })
  }

  console.log(currentUser);


}
</script>
    
<style>
.setHeight {
  height: 60% !important;
}
</style>